{% extends "base.html" %}

{% block css %}
    <style>
        tr:hover {
            background-color: #e7e7e7;
        }

        #cen {
            text-align: center;
        }

        a:hover {
            color: red;
        }

        .btn-primary:hover {
            color: red;
        }

        #plan-name {
            max-width: 150px;
            word-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        #plan-name:hover {
            white-space: normal;
            overflow: auto;
        }

        .btn {
            padding: 6px 18px;
        }

        #plan-content {
            text-align: center;
            max-width: 50px;
            word-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
{% endblock %}

{% block nav %}
    {% for foo in model_list %}
        <li><a href="{{ foo.url }}"><i class="{{ foo.icon }}"></i>{{ foo.model_name }}</a>
        </li>
    {% endfor %}

{% endblock %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li class="active">
                    <a class="this-page">测试计划</a>
                </li>
            </ol>

        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <a href="{% url 'base:plan_add' %}" class="btn btn-primary"><i class="fa fa-plus-circle"></i>&nbsp;添加计划</a>
                </div>
                <div class="spinner"></div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th id="cen">ID</th>
                            <th id="cen">计划名称</th>
                            <th id="cen">所属项目</th>
                            <th id="cen">测试环境</th>
                            <th id="cen">计划内容</th>
                            <th id="cen">性能测试</th>
                            {#                            <th id="cen">定时任务</th>#}
                            <th id="cen">描述</th>
                            <th id="cen">更新时间</th>
                            <th id="cen">更新用户</th>
                            <th id="cen">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for plan in object_list %}
                            <tr>
                                <td id="cen">{{ plan.plan_id }}</td>
                                <td id="plan-name"><a
                                        href="{% url 'base:plan_update' %}?plan_id={{ plan.plan_id }}&&page={{ page }}"
                                        class="layui-btn layui-btn-xs"
                                        lay-event="edit">{{ plan.plan_name }}</a></td>
                                <td id="cen" prj_id="{{ plan.project.prj_id }}">{{ plan.project }}</td>
                                <td id="cen"
                                    env_id="{{ plan.environment.env_id }}">{{ plan.environment.env_name }}</td>
                                <td id="plan-content">{{ plan.content }}</td>
                                <td id="cen">{{ plan.is_locust }}</td>
                                {#                                <td id="cen">{{ plan.is_task }}</td>#}
                                <td>{{ plan.description }}</td>
                                <td id="cen">{{ plan.update_time }}</td>
                                <td id="cen">{{ plan.update_user }}</td>
                                <td id="cen">
                                    <a href="#" class="layui-btn layui-btn-danger layui-btn-xs"
                                       onclick="debug_button(this);"
                                       data-toggle="modal" data-target="#runCaseForm"><i class="fa fa-recycle"></i>&nbsp;&nbsp;&nbsp;
                                    </a>
                                    <a class="layui-btn layui-btn-danger layui-btn-xs"
                                       href="{% url 'base:report_page' %}?plan_id={{ plan.plan_id }}">
                                        <i class="fa fa-edit"></i>&nbsp;&nbsp;&nbsp;
                                    </a>
                                    <a href="{% url 'base:plan_delete' %}?plan_id={{ plan.plan_id }}&&page={{ page }}"
                                       class="layui-btn layui-btn-danger layui-btn-xs"
                                       onclick="return delete_btn()">
                                        <img src="/static/admin/img/icon-deletelink.svg"/>&nbsp;&nbsp;&nbsp;</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="modal fade" id="runCaseForm" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">×</span></button>
                                    <h4 class="modal-title">计划运行</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-horizontal" method="post" action="">
                                        <div class="form-group">
                                            <input type="hidden" id="debug_case_id" name="case_id">
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">计划名称</label>
                                            <div class="col-sm-8"><span id="case_name_"></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">环境选择</label>
                                            <div class="col-sm-8">
                                                <select class="form-control m-b" id="debug_env_id" name="env_id">
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-3 control-label">执行方式</label>
                                            <div class="col-sm-8">
                                                <select type="text" id="run_mode" class="form-control">
                                                    <option value='1'>HttpRunner</option>
                                                    <option value='0'>Default</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-3 control-label"> 提示信息</label>
                                            <div class="spinner1"></div>
                                            <div class="col-sm-8" id="result">

                                            </div>
                                        </div>

                                        <div class="modal-footer">
                                            <button type="button" id="cancel_run" class="btn btn-default"
                                                    data-dismiss="modal"><i
                                                    class="fa fa-mail-reply-all"></i>&nbsp;取消
                                            </button>
                                            <button type="button" onclick="run_button()" class="btn btn-primary"
                                                    id="debug"><i
                                                    class="fa fa-circle-o-notch"></i>&nbsp;执行
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="input-timed">

                    </div>
                    {% if error %}
                        <span style="color: red; font-size: 10px;">{{ error }}</span>
                    {% endif %}
                </div>
                {% if is_paginated %}
                    <ul class="pagination">
                        {% if first %}
                            <li class="page"><a href="?page=1">1</a></li>
                        {% endif %}
                        {% if left %}
                            {% if left_has_more %}
                                <li class="page"><a href="javascript:void(0)">...</a></li>
                            {% endif %}
                            {% for i in left %}
                                <li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
                            {% endfor %}
                        {% endif %}
                        <li class="page"><a href="javascript:void(0)" class="active"> {{ page_obj.number }}</a></li>
                        {% if right %}
                            {% for i in right %}
                                <li class="page"><a href="?page={{ i }}">{{ i }}</a></li>
                            {% endfor %}
                            {% if right_has_more %}
                                <li class="page"><a href="javascript:void(0)">...</a></li>
                            {% endif %}
                        {% endif %}
                        {% if last %}
                            <li class="page"><a
                                    href="?page={{ paginator.num_pages }}">{{ paginator.num_pages }}</a>
                            </li>
                        {% endif %}

                    </ul>
                {% endif %}
            </div>

        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script>

        //删除
        function delete_btn() {
            if (window.confirm("你确定要删除吗？")) {
                return true;//确定返回真
            }
            else {
                return false;//取消返回假
            }
        }

        //运行
        function run_button(obj) {
            $('#result').empty();
            var plan_id = $("#debug_case_id").val();
            var run_mode = $("#run_mode").val();
            var env_id = $("#debug_env_id").val();
            var btn = $("#debug");
            $('.spinner').show();
            $.ajax({
                type: "post",
                url: "/base/plan_run/",
                async: false,
                data: {"plan_id": plan_id, "run_mode": run_mode, "env_id": env_id},
                success: function (data) {
                    if (data.hasOwnProperty('error')) {
                        console.log(data);
                        html = '<p style="font-family: Consolas;font-size:12px;color:red;margin:5% 10%">' + data['error'] + '</p>';
                        $("#result").append(html);
                        $('.spinner').hide();
                    } else {
                        console.log(data);
                        html = '<p style="font-family: Consolas;font-size:12px;color:green;margin:5% 10%">' + data + '</p>';
                        $("#result").append(html);
                        $('.spinner').hide();
                        btn.html("立即查看测试报告");
                        btn.removeAttr("onclick");
                        btn.on("click", function () {
                            location = "/base/report_page/?plan_id=" + plan_id
                        })
                    }
                },
                error: function () {
                    html = '<p style="font-family: Consolas;font-size:12px;color:red;margin:5% 10%">' + '执行失败!!!' + '</p>';
                    $("#result").append(html);
                    $('.spinner').hide();
                }
            });

        }

        $("#cancel_run").click(function () {
            location.reload()
        });

        function debug_button(obj) {
            $('#result').empty();
            var case_id = obj.parentNode.parentNode.children[0].innerText;
            var case_name = obj.parentNode.parentNode.children[1].innerText;
            var prj_id = obj.parentNode.parentNode.children[2].getAttribute("prj_id");
            var env_name = obj.parentNode.parentNode.children[3].innerText;
            var env_id = obj.parentNode.parentNode.children[3].getAttribute("env_id");
            var run = $("#cancel_run");

            $("#debug_case_id").val(case_id);
            run.html("取消");
            run.attr("class", "btn btn-default");
            $('#case_name_').empty();
            $("#debug_env_id").empty();
            $.ajax({
                type: "get",
                url: "/base/findata/",
                data: {
                    "prj_id": prj_id,
                    "type": "get_env_by_prj_id"
                },
                success: function (data) {
                    var listdata = eval(data);
                    $('#case_name_').append(case_name);
                    $("#debug_env_id").append("<option value=" + env_id + ">" + env_name + "</option>");
                    $(listdata).each(function (i, item) {
                        $("#debug_env_id").append("<option value=" + item.env_id + ">" + item.env_name + "</option>");
                    })
                },
                error: function () {
                    alert("获取测试环境失败！");
                }
            });
        }

    </script>
{% endblock %}
